<template>
    <div>
        <div id="searchbar" class="all" style="padding: 5px;width: 100%;background: #ffffff2e;">
            <a-row>
                <a-col :span="2">
                  
              </a-col>
              <a-col :span="3">
                  <a-tag :color="card1tagColor">{{ card1desc }}</a-tag>
                  <a-avatar
                    shape="square"
                    size="large"
                    :style="{
                      backgroundColor: card1color,
                      verticalAlign: 'middle',
                    }"
                    >{{ card1avatar }}</a-avatar>
              </a-col>
               <a-col :span="3">
                   <a-tag :color="card2tagColor">{{ card2desc }}</a-tag>
                  <a-avatar
                    shape="square"
                    size="large"
                    :style="{
                      backgroundColor: card2color,
                      verticalAlign: 'middle',
                    }"
                    >{{ card2avatar }}</a-avatar>
               </a-col>
                <a-col :span="3">
                <div style="padding: 3px;">
                   <a-tag :color="card3tagColor">{{ card3desc }}</a-tag>
                   </div>
               </a-col>
                <a-col :span="8">
                    <a-input-search  enter-button placeholder="查找企业" size="large" style="width: 380px" @search="onQySearch" />
                </a-col>
            </a-row>
     
            </div>
        <div id="map" :style="{ height: Height + 'px' }" style="border: 1px solid #9999ff;box-shadow: 0 0px 5px 0 rgb(6 13 245) inset;}">
             <div id="select-left-bar2">
                          <a-card>
                <span slot="title">
                  <a-icon type="table"/>
                  <span style="margin-left:10px;">监测点信息</span>
                  </span>
                
                <a-table
                      :dataSource="leftTableData"
                      :columns="columns"
                      rowKey="kid"
                      :pagination="pagination"
                      size="middle"
                       :customRow="clickRow"
                       :showHeader="showHeader"
                    >
                    </a-table>
                    <div style="text-align: center;padding: 5px;">
                    <a-tag :color="card3tagColor">{{ card3desc }}</a-tag></div>
                
              </a-card>
        </div>
        </div>
       <PopUp :popupOption="popupData"></PopUp>
       
    </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
import config from '../../config/config';
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
import PopUp from './PopUp';
//import ADLayer from 'openlayers_echart';
export default {
  name:'R10102',
  data() {
    
    return {
        
      map:null,
      Height: 500,
      showHeader:false,
      loaclQyData:[],
      leftTableData: [
        {kid:'1',name:'聚英学校',geom:[36398916.2801803, 4393765.13449465]},
        {kid:'2',name:'市林业局',geom:[36397837.6737836, 4396555.68704145]},
        {kid:'3',name:'中海勃湾学校',geom:[36396423.1572851, 4392165.79032534]}
      ],
      localQyInfo:[],
      mouseEnterDelay: 0.6,
      //传递到弹窗组件中的数据
      popupData: {},
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
          width:200,
          align: 'center',
        }
      ],
      pagination: false,
      card1color: '#FAAD14',
      card1avatar: '6个',
      card1tagColor: 'orange',
      card1desc: '企业总数',

      card2color: '#52C41A',
      card2avatar: '6个',
      card2tagColor: 'green',
      card2desc: '排放口总数',

      card3color: '#1890FF',
      card3avatar: '条',
      card3tagColor: '#f50',
      card3desc: '累计清洗数据473449条',
    };
  },
  components: {
    PopUp
  },
  mounted: function() {
    let height = window.innerHeight - 154;
    this.Height = height;
    this.$nextTick(() => {
      this.map = mapOper.initBlankMap('map');
      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      this.map = mapOper.addMarker(markerSetting);
      
      let params = {
        map: this.map,
        center: [36398916.2801803, 4393765.13449465],
        zoom: 7
      };
      mapOper.ZoomAndCenter(params);
      
    });
    //this.initJcdData();
    //this.initQyBasicInfo();
    
  },
  methods:{
    onQySearch:function(){
          
    },
    monitorPointLocate(name){
      console.log(name);
    },
    initJcdData() {
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcd/getAllJcd',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            that.loaclQyData=response.data.data;
            that.card2avatar=response.data.data.length+'个';
            var grarr=_.uniqBy(response.data.data, 'qyname');
            that.card1avatar=grarr.length+'个';
            // var grarr=_.groupBy(response.data.data, 'qybh');
            let overlayerdata={
              type: 'FeatureCollection',
              name: 'qy_jcd_gk36',
              features:[]
            };
            var pointdata=[];
            _.forEach(grarr, function(value) {
              var tempfeature={
                type: 'Feature',
                properties:{
                  qyname:value.qyname,
                  qybh:value.qybh
                },
                geometry:JSON.parse(value.geom)
              };
              overlayerdata.features.push(tempfeature);
              var tempt={
                name: value.qyname,
                value:[tempfeature.geometry.coordinates[0],tempfeature.geometry.coordinates[1],30]
              };
              pointdata.push(tempt);
            });
            
            //let style = mapOper.getGeoJsonStyle('qyjcd');
            //点样式,图片
            var pointStyleIconParams = {
              geotype: 'PointIcon',
              icon: {
                //anchor: [0.5, 1],
                src: '',
                //'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3794829799,3479646937&fm=26&gp=0.jpg'
              },
              text:{
                font:'12px Calibri,sans-serif',
                offsetY:30,
                fill:{
                  color:'#ffffff00',
                },
                Stroke:{
                  color:'#ffffff',
                  width:0
                }
              }
            };
            var pointStyleIcon = mapOper.createStyle(pointStyleIconParams);

            let wfsParams = {
              map: that.map,
              jsonData: overlayerdata,
              style: pointStyleIcon,
              styleFunc: function(feature) {
                pointStyleIcon.getText().setText(feature.get('qyname'));
                return pointStyleIcon;
              },
              selectFunc: function(e) {
                if (e.target.getFeatures().getLength() == 1) {
                  let feature = e.target.getFeatures().item(0);
                  console.log(feature);
                } else {
                  console.log('feature');
                }
              }
            };
            that.map = mapOper.loadWFSLayer(wfsParams);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    initQyBasicInfo(){
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qybasic/getAllQyInfo',
        successFunc: response => {
          //console.log(response.data.data);
          that.localQyInfo=response.data.data;
          let tempdata=[];
          _.forEach(response.data.data, function(value) {
            tempdata.push({kid:value.bh,qyname:value.name,hylx:value.hylb,gm:value.zywrw});
          });
          that.leftTableData=tempdata;


        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpGet(param);
    },
    clickRow(record) {
      return {
        on: {
          click: () => {
            let that=this;
            that.map.getView().setCenter(record.geom);
            //that.map.getView().setZoom(8);
            let popset = {
              map: that.map,
              //container:container,
              coordinate: record.geom
            };
            that.popupData = {
              display: 'block',
              contentType: 'wh_aqi',
              Title: record.name,
            };
            mapOper.showPopUp(popset);
          }
        }
      };
    },
    viewStatistics(record) {
      console.log(record);
    },
    deleteFileInfo(key) {
      console.log(key);
      let mythis = this;
      let deleteConfirmParams = {
        this: mythis,
        title: '提示',
        message: '您确定要删除该条数据吗？',
        okType: 'danger',
        successFunc: function() {
          let deleteReadyParams = {
            this: this,
            url: config.webapiUrl + '/jcddc/delete?qybh=' + key,
            data: {
              headers: {
                Authorization: 'Bearer ' + mythis.token,
              },
            },
            successFunc: function(response) {
              if (response.data.code == 0) {
                let deleteSuccessParams = {
                  this: mythis,
                  title: '提示',
                  message: response.data.data,
                  type: 'success'
                };
                commonOper.Notification(deleteSuccessParams);
                mythis.fetch();
              } else {
                let deleteParams = {
                  this: mythis,
                  title: '提示',
                  message: '网络连接错误！' + response.data.msg,
                  type: 'warning'
                };
                commonOper.Notification(deleteParams);
              }
            },
            failFunc: function(response) {
              let params = {
                this: mythis,
                title: '提示',
                message: '网络连接错误！' + response,
                type: 'warning'
              };
              commonOper.Notification(params);
            },
          };
          commonOper.HttpGet(deleteReadyParams);
        },
        failFunc: function() {
          let deleteCancelParams = {
            this: mythis,
            title: '提示',
            message: '您取消了删除操作！',
          };
          commonOper.showWarningAlert(deleteCancelParams);
        },
      };
      commonOper.showWarnAlert(deleteConfirmParams);
    },

  }
};
</script>
<style scoped>
.content .ant-input{
background-color: rgba(0, 0, 0, 0.07) !important;
}

.content .ant-input:focus {
    border-color: #d9d9d9;
    border-right-width: 1px !important;
    outline: 0;
    color:#fff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.content .ant-tag {
line-height: 30px;
font-size: 14px;
}
.content .ant-avatar {
    font-size: 18px;
}


@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes warn {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.area-box .dot {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f90;
  opacity: 1;
  filter: alpha(opacity=100);
}
.area-box .pulse {
  position: absolute;
  top: -28px;
  left: -28px;
  height: 66px;
  width: 66px;
  border: 2px solid #f90;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  -moz-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  box-shadow: 0 0 4px #f90, 0 0 10px #f90 inset;
  opacity: 0.12;
  filter: alpha(opacity=0);
  -webkit-animation: warn 2s ease-out both;
  -moz-animation: warn 2s ease-out both;
  -o-animation: warn 2s ease-out both;
  animation: warn 2s ease-out both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: 0 0;
}
.area-box .delay-1 {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
.area-box .delay-2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.area-box .delay-3 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.area-box .delay-4 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.area-box .delay-5 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.area-box .delay-6 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.area-box .delay-7 {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -o-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.area-box .delay-8 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.area-box .delay-9 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.area-box .delay-10 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.area-box .delay-11 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#select-left-bar2 {
  width: 320px;
  position: absolute;
  bottom:480px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
}

</style>